<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 24px; font-weight: bold">{{ inspectionInfo.patrolschemeName }}</span>
      </div>
      <div>
        <el-row>
          <el-form label-width="120px">
            <el-col :span="12" style="line-height: 30px">
              <p><el-form-item label="创建人：">{{ inspectionInfo.insertPerson }} </el-form-item></p>
              <p>
                <el-form-item label="创建时间：">{{ inspectionInfo.insertTime }}
                </el-form-item>
              </p>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-button type="primary" plain @click="dialogVisible = true">调整计划</el-button>
              <el-button type="primary" plain @click="closeForm">关闭</el-button>
              <el-button type="primary" plain>导出</el-button>
              <el-button type="primary" plain>打印</el-button>
            </el-col>
          </el-form>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-tabs v-model="tab" @tab-click="handleClick">
            <el-tab-pane label="计划信息" name="计划信息"></el-tab-pane>
            <el-tab-pane label="巡检明细" name="巡检明细"></el-tab-pane>
            <el-tab-pane label="审核记录" name="审核记录"></el-tab-pane>
            <el-tab-pane label="操作记录" name="操作记录"></el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-card>
    <!-- 基础信息 -->
    <span v-if="tab == '计划信息'">
      <el-card class="box-card" style="line-height: 40px">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
        </div>
        <div>
          <el-form label-width="250px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划编号:">{{ inspectionInfo.code }} </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计划名称:">{{ inspectionInfo.patrolschemeName }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划开始时间:">{{ inspectionInfo.patrolschemeOntime }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计划结束时间:">{{ inspectionInfo.patrolschemeUntime }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划类型:">{{ inspectionInfo.patrolschemeDaytypeId }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行周期规则:">{{ inspectionInfo.deviceExecution.executionName }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="执行规则描述:">{{ inspectionInfo.deviceExecution.executionDescribe }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="备注:">{{ inspectionInfo.notas }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>

      <!-- 巡检人员 -->
      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span>巡检人员</span>
        </div>
        <div>
          <el-form label-width="250px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="巡检班组:">{{ inspectionInfo.patrolschemeClass }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="巡检人:">{{ inspectionInfo.patrolschemePerson }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>

      <!-- 附件 -->
      <el-card class="box-card" style="margin-top: 10px; margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>附件</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">批量下载</el-button>
          <el-table :data="files" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="serial" label="序号" align="center">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="filename" label="文件名" align="center"></el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
            <el-table-column prop="uploader" label="上传者" align="center"></el-table-column>
            <el-table-column prop="size" label="文档大小" align="center"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <span v-if="tab == '巡检明细'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>巡检明细</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="inspectionDetails" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="code" label="设备编号" align="center"></el-table-column>
            <el-table-column prop="equipment.name" label="设备名称" align="center"></el-table-column>
            <el-table-column prop="equipment.specifications" label="规格型号" align="center"></el-table-column>
            <el-table-column prop="equipment.deviceType" label="设备类型" align="center"></el-table-column>
            <el-table-column prop="equipment.useDepartments" label="使用部门" align="center"></el-table-column>
            <el-table-column prop="equipment.storageLocation" label="存放位置" align="center"></el-table-column>
            <el-table-column prop="whether" label="是否拍照" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.whether==1">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column prop="checkIn" label="扫码登记" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.checkIn==1">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column label="巡检项目" align="center">
              <template slot-scope="scope" >
                <el-button type="text" size="small" @click="selectInspection(scope.row.project)">查看巡检项目</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <span v-if="tab == '审核记录'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>审核记录</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="auditRecords" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="node" label="操作节点"></el-table-column>
            <el-table-column prop="operator" label="操作人"></el-table-column>
            <el-table-column prop="action" label="操作"></el-table-column>
            <el-table-column prop="time" label="操作时间"></el-table-column>
            <el-table-column prop="comments" label="审批内容"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <span v-if="tab == '操作记录'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>操作记录</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="auditRecords" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="node" label="操作节点"></el-table-column>
            <el-table-column prop="operator" label="操作人"></el-table-column>
            <el-table-column prop="action" label="操作"></el-table-column>
            <el-table-column prop="time" label="操作时间"></el-table-column>
            <el-table-column prop="comments" label="操作内容"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <el-dialog v-model="dialogVisible" :visible.sync="dialogVisible" style="width: 150%; margin-left: -25%">
      <span>任务调整</span>
      <el-divider></el-divider>

      <el-form label-width="150px">
        <el-row :gutter="20">
          <el-col span="12">
            <el-form-item label="计划编号">
              <el-input style="width: 400px"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="计划名称">
              <el-input style="width: 400px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col span="12">
            <el-form-item label="计划开始时间">
              <el-input style="width: 400px"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="计划结束时间">
              <el-input style="width: 400px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col span="12">
            <el-form-item label="巡检班组">
              <el-input style="width: 400px"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="巡检人">
              <el-input style="width: 400px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col span="12">
            <el-form-item label="*调整类型">
              <el-select v-model="value" placeholder="请选择" size="large" style="width: 400px">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-span v-if="value == 1">
          <el-row :gutter="20">
            <el-col span="12">
              <el-form-item label="*调整结束时间">
                <el-date-picker v-model="UpdateTime" type="date" placeholder="请选择日期" :size="size"
                  style="width: 400px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="*调整原因">
                <el-input type="textarea" :rows="4" style="width: 800px" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-span>
        <el-span v-if="value == 2">
          <el-row>
            <el-col span="12">
              <el-form-item label="更改班组">
                <el-input v-model="input3" style="width: 400px">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="更改巡检人" style="margin-left: 10px">
                <el-input v-model="input3" style="width: 400px" placeholder="请输入">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="*调整原因">
                <el-input type="textarea" :rows="4" style="width: 800px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-span>
        <el-divider></el-divider>
        <div style="text-align: right">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确认</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 巡检项目预览 -->
    <el-dialog v-model="preview" :visible.sync="preview" title="巡检项目预览" style="width: 150%; margin-left: -25%">
      <el-divider></el-divider>
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-input placeholder="请输入巡检项目名称/编号" style="width: 300px" v-model="condition"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-select style="width: 300px; margin-left: -60px" placeholder="请选择巡检分类" v-model="type">
                <el-option v-for="item in ProjectType.data" :key="item" :label="item.dictLabel"
                :value="item.dictLabel"></el-option> </el-select></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item>
              <el-input placeholder="请输入巡检内容" style="width: 300px" v-model="content"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="text-align: right">
              <el-button @click="reset">重置</el-button>
              <el-button @click="selectInspro">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="inspectPro" style="width: 100%">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="序号" fixed> 
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="巡检项目名称" align="center" prop="deviceInspectionproject.inspectionprojectName"> </el-table-column>
        <el-table-column label="巡检项目编号" align="center" prop="deviceInspectionproject.code"> </el-table-column>
        <el-table-column label="巡检分类" align="center" prop="deviceInspectionproject.inspectionprojectTypeId"> </el-table-column>
        <el-table-column label="巡检内容" align="center" prop="deviceInspectionproject.inspectionprojectContent"> </el-table-column>
        <el-table-column label="巡检结果" align="center" prop="isJudge"> </el-table-column> 
        <el-table-column label="是否正常" align="center" prop="state"> 
          <template slot-scope="scope">
            <span v-if="scope.row.state==0">正常</span>
            <span v-else>异常</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="deviceInspectionproject.notse"> </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <div style="text-align: right">
        <el-button @click="clerk = false">取消</el-button>
        <el-button type="primary" @click="clerk = false">确认</el-button>
      </div>
    </el-dialog>

    <el-card class="close-card">
      <el-button>关闭</el-button>
    </el-card>
  </div>
</template>


<script>
import { listDe,listIns,listDoc } from "@/api/inspection/inspectionPlan";
import { selectZi } from "@/api/eastjet-maintenance/type/type";

export default {
  data() {
    return {
      preview: false,
      tab: "计划信息",
      dialogVisible: false,
      value: "",
      inspectionInfo: {},
      type: [
        {
          value: 1,
          label: "调整计划时间",
        },
        { value: 2, label: "修改巡检执行人" },
      ],
      inspectionDetails: [
        {
          index: 1,
          deviceCode: "SB2022111713202",
          deviceName: "机床",
          model: "CNC-500",
          deviceType: "生产设备",
          department: "生产部门",
          location: "生产车间",
          photo: "是",
          scan: "否",
        },
        {
          index: 2,
          deviceCode: "SB2022111713202",
          deviceName: "机床",
          model: "CNC-500",
          deviceType: "生产设备",
          department: "生产部门",
          location: "生产车间",
          photo: "是",
          scan: "否",
        },
        {
          index: 3,
          deviceCode: "SB2022111713202",
          deviceName: "机床",
          model: "CNC-500",
          deviceType: "生产设备",
          department: "生产部门",
          location: "生产车间",
          photo: "是",
          scan: "否",
        },
        {
          index: 4,
          deviceCode: "SB2022111713202",
          deviceName: "机床",
          model: "CNC-500",
          deviceType: "生产设备",
          department: "生产部门",
          location: "生产车间",
          photo: "是",
          scan: "否",
        },
        {
          index: 5,
          deviceCode: "SB2022111713202",
          deviceName: "机床",
          model: "CNC-500",
          deviceType: "生产设备",
          department: "生产部门",
          location: "生产车间",
          photo: "是",
          scan: "否",
        },
      ],
      files: [],
      zhi: "sys_inpectionpro_type",
      condition: "",
      content:"",
      type: "",
      ProjectType: [],
      inspectPro:[],
    };
  },
  mounted() {
    this.init();
    this.select();
    this.document();
    selectZi(this.zhi).then((res) => {
      this.ProjectType = res.data;
      console.log("字典", this.ProjectType);
    });
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    init() {
      this.inspectionInfo = this.$route.query;
    },
    select(){
      listDe(this.inspectionInfo.code).then((res) => {
          console.log(res);
          this.inspectionDetails=res.data;
      });
    },selectInspection(condition,content,type){
      condition=this.condition;
      content=this.content;
      type=this.type;
      this.preview=true;
      listIns(this.inspectionInfo.code,condition,content,type).then((res) => {
        this.inspectPro=res.data;
      });
     },
    reset() {
      this.condition = "";
      this.content = "";
      this.type = ""; 
    },
    selectInspro(){
      this.selectInspection(this.condition,this.content,this.type);

    },
    document(){
      listDoc(this.inspectionInfo.code).then((res) => {
        this.files = res.data;
        console.log("document",this.files);
      });
    },
    closeForm(){
      this.$router.go(-1);
    }
  },
};
</script>

<style scoped>
.box-card {
  margin: 20px 20px 40px 40px;
  width: 1250px;
  /* 设置固定宽度 */
  max-width: 100%;
  /* 防止过大 */
}

.close-card {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  /* margin-top: 20%; */
  text-align: center;
  z-index: 1;
}

.clearfix:after {
  font-weight: bold;
}
</style>